<template>
  <div class="header">
    <div class="box">
      <span class="tishi">{{ tips }}</span>
      <router-link class="denglu" to="mylogin" v-if="nickName">{{
        nickName
      }}</router-link>
      <router-link class="denglu" to="mylogin" v-else>未登录</router-link>
      <router-link to="search">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          class="search1"
        />
      </router-link>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v, i) in imgDataArr" :key="i">
        <router-link :to="{ path: '/xiangqing', query: { pid: v.pid } }">
          <img :src="v.bannerImg" alt="" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 热卖推荐 -->
    <div v-if="data" class="remai">热卖推荐</div>
    <div class="natiebox">
      <div class="natie" v-for="(v, k) in data" :key="k">
        <div class="na">
          <div class="n-top">
            <router-link :to="{ path: '/xiangqing', query: { pid: v.pid } }">
              <img :src="v.smallImg" alt="" />
            </router-link>
          </div>
          <div class="n-bottom">
            <div class="name">{{ v.name }}</div>
            <div class="enname">{{ v.enname }}</div>
            <div class="price">￥{{ v.price }}</div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
    <van-tabbar route>
      <van-tabbar-item replace to="/mypage" class="iconfont icon-shouye"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/mymenu" class="iconfont icon-caidan"
        >菜单</van-tabbar-item
      >
      <van-tabbar-item replace to="/mycart" class="iconfont icon-gouwuche"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item
        replace
        to="/mylogin"
        class="iconfont icon-wodefill"
        v-if="!tokenString"
        >我的</van-tabbar-item
      >
      <van-tabbar-item
        replace
        to="/mymine"
        class="iconfont icon-wodefill"
        v-else
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>


<style lang="scss" scoped>
.header {
  width: 100%;
  .box {
    display: flex;
    .tishi {
      width: 70px;
      height: 50px;
      line-height: 50px;
      margin-left: 10px;
      font-weight: bold;
    }
    .denglu {
      margin-left: 10px;
      height: 50px;
      line-height: 50px;
      font-weight: bold;
      color: blue;
    }
    .search1 {
      width: 230px;
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 70px;
    text-align: center;
    // background-color: red;
    img {
      margin-left: 10px;
      margin-right: 10px;
      width: 95%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .remai {
    width: 100px;
    height: 35px;
    line-height: 35px;
    color: white;
    background-color: blue;
    text-align: center;
    border-top-right-radius: 20px;
    margin-left: 10px;
  }
  .natiebox {
    margin-top: 10px;
    margin-bottom: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .natie {
      width: 50%;
      display: flex;
      flex-wrap: wrap;
      .na {
        margin-left: 10px;
        .n-top {
          img {
            width: 90%;
            border-radius: 10px;
          }
        }
        .n-bottom {
          width: 100%;
          .name {
            color: #808487;
            font-size: 15px;
          }
          .enname {
            width: 100%;
            color: #808487;
            font-size: 13px;
          }
          .price {
            color: #0c34ba;
            font-size: 15px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>

<script>
import "../assets/fonts/iconfont.css";
import myFooter from "@/components/my-footer.vue";
import { Switch } from "vant";
export default {
  name: "mypage",
  components: {
    myFooter,
  },
  data() {
    return {
      imgDataArr: [],
      value: "",
      pid: "",
      tips: "",
      data: [],
      nickName: null,
      tokenString: null,
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },

    getData() {
      // nickName1 = this.$router.query.nickName1;
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      };
      this.axios("/banner", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          console.log("zheshi",res);
          this.imgDataArr = res.data.result;
          for (var i = 0; i < res.data.result.length; i++) {
            let pid = res.data.result[i].pid;
            this.pid = pid;
            console.log("这是pid",pid);
          }
          // console.log(this.imgDataArr);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reMai() {
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        key: "isHot",
        value: 1,
      };
      this.axios("/typeProducts", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          console.log(res);
          this.data = res.data.result;
          console.log("this.data",this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    mydetail() {
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: this.tokenString,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/findAccountInfo", {
        method: "GET",
        params: d
         
      })
        .then((res) => {
          console.log("456", res);
          this.nickName = res.data.result[0].nickName;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    myTime() {
      let time = new Date();
      let hour = time.getHours();
      console.log("time", hour);
      if (hour>6&&hour<12) {
        this.tips = "早上好！";
      } else if (hour >=12 && hour<=18) {
        this.tips = "中午好！";
      } else if (hour >18 && hour <= 24) {
        this.tips = "晚上好！";
      } else {
        this.tips = "深夜好！";
      }
    },
  },
  computed: {
     
  },
  mounted() {},
  created() {
    if (!this.tokenString) {
      this.tokenString = window.localStorage.getItem("token_list");
      console.log(this.tokenString);
    } else {
      this.tokenString = null;
      console.log(this.tokenString);
    }
    this.nickName = this.$route.query.nickName1;
    console.log("123", this.$route.query.nickName1);
    this.reMai();
    this.getData();
    this.mydetail();
    this.myTime();
  },
};
</script>